<script setup lang="ts">
import { onBeforeUnmount, ref, nextTick, watch } from "vue";
import { useResizeObserver } from "@pureadmin/utils";
import ComponentWrapper from "../component/ComponentWrapper.vue";

import { ArrowLeft } from "@px-ui/icons-vue";
import useDrag from "../hooks/useDrag";
const emits = defineEmits(["inspectionHandle"]);

defineOptions({
  name: "BuildTemplate"
});
const done = defineModel("done");
const props = defineProps({
  middleComp: {
    type: Array,
    required: true,
    default: () => []
  },
  bottomComp: {
    type: Array,
    required: true,
    default: () => []
  },
  leftComp: {
    type: Array,
    required: false,
    default: () => []
  },
  widgetVerticalCompLeft: {
    type: Array,
    required: false,
    default: () => []
  },
  rightComp: {
    type: Array,
    required: true,
    default: () => []
  },
  inspectionList: {
    type: Array,
    required: false,
    default: () => []
  },
  preview: {
    type: Boolean,
    required: false,
    default: false
  }
});
const buildRef = ref();
let offEvents = null;
const { dragInit } = useDrag();
watch(
  () => props.middleComp,
  (cur, pre) => {
    if (cur.length > 0) {
      nextTick(async () => {
        done.value = true;
        offEvents = await dragInit(cur);
        // done.value = true;
      });
    }
  }
);
onBeforeUnmount(() => {
  if (offEvents) {
    offEvents();
    offEvents = null;
  }
});
// onMounted(() => {
//   useResizeObserver(
//     buildRef,
//     entries => {
//       const [entry] = entries;
//       const [{ inlineSize, blockSize }] = entry.borderBoxSize;
//       console.log(inlineSize, blockSize);
//     },
//     { time: 0 }
//   );
// });
const toggleRgiht = ref(true);
const toggleDropdown = () => {
  toggleRgiht.value = !toggleRgiht.value;
};
const inspectionHandle = val => {
  emits("inspectionHandle", val);
};
</script>

<template>
  <div ref="buildRef" class="build-tmpl">
    <div class="build-tmpl-middle">
      <div class="middle-content">
        <ComponentWrapper v-for="(item, index) in props.middleComp" :key="index" :config="item['item']" :remote-data="item['rawData']" />
      </div>

      <div v-if="props.leftComp.length > 0" class="build-tmpl-left">
        <ComponentWrapper v-for="(item, index) in props.leftComp" :key="index" :config="item['item']" :remote-data="item['rawData']" />
      </div>

      <div class="build-tmpl-right" :class="{ 'select-open': toggleRgiht, 'select-close': !toggleRgiht }">
        <div v-if="props.widgetVerticalCompLeft.length > 0" class="build-tmpl-widget-vertical-left">
          <ComponentWrapper
            v-for="(item, index) in props.widgetVerticalCompLeft"
            :key="index"
            :config="item['item']"
            :remote-data="item['rawData']"
          />
        </div>
        <px-dropdown
          v-if="!props.preview && (props.inspectionList.length > 1 || props.inspectionList.length === 0)"
          class="inspection"
          trigger="click"
          @command="inspectionHandle"
        >
          <px-button type="primary"
            >巡检路线<px-icon class="px-icon--right"><arrow-down /></px-icon
          ></px-button>

          <template #dropdown>
            <px-dropdown-menu v-if="props.inspectionList.length > 1">
              <px-dropdown-item v-for="item in props.inspectionList" :key="item.routeCode" :command="item.routeCode">{{
                item.routeName
              }}</px-dropdown-item>
            </px-dropdown-menu>
            <div v-else-if="props.inspectionList.length == 0" class="px-dropdown-menu__item">未配置巡检路线</div>
            <!-- <px-empty v-else description="暂无可用操作" :image-size="80" style="padding: 16px; width: 160px" /> -->
          </template>
        </px-dropdown>
        <px-button
          v-else-if="!props.preview && props.inspectionList.length === 1"
          class="inspection"
          type="primary"
          @click="inspectionHandle(props.inspectionList[0]?.routeCode)"
          >巡检路线</px-button
        >
        <px-button
          v-if="props.rightComp.length > 0"
          class="toggle-btn action"
          :class="{ active: toggleRgiht, 'no-active': !toggleRgiht }"
          :icon="ArrowLeft"
          circle
          @click.stop="toggleDropdown()"
        />
        <px-scrollbar class="right-content">
          <ComponentWrapper v-for="(item, index) in props.rightComp" :key="index" :config="item['item']" :remote-data="item['rawData']" />
        </px-scrollbar>
      </div>
      <!-- <div class="build-tmpl-bottom">
        <ComponentWrapper v-for="(item, index) in props.bottomComp" :key="index" :config="item['item']" :remote-data="item['rawData']" />
      </div> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
/* 逐渐从右侧展开的动画 */
@keyframes slide-right {
  0% {
    width: 16px;
  } /* 从 0.1 开始，因为收起后保留 20px */
  100% {
    width: 420px;
  }
}

/* 逐渐从右侧收起的动画 */
@keyframes slide-left {
  0% {
    width: 420px;
  }

  100% {
    width: 16px;
  } /* 收起到 0.1，保留 20px */
}

.build-tmpl {
  display: flex;
  flex-grow: 1;
  width: 100%;
  min-width: 1300px;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;

  .build-tmpl-middle {
    // background-color: red;
    position: relative;
    // display: flex;
    // justify-content: center;
    flex-grow: 1;
    // align-items: center;
    width: 100%;
    height: 100%;
    // margin-left: 16px;

    .middle-content {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .build-tmpl-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      flex-grow: 1;
      flex-shrink: 0;
      justify-content: space-around;
      width: calc(100% - 450px);
      height: 230px;

      & > div {
        width: 47%;
        height: 100%;
        // margin-right: 16px;
      }
    }
  }

  .build-tmpl-widget-vertical-left {
    position: absolute;
    top: 0;
    left: -70px;
    width: 50px;
    height: 100%;
  }

  .build-tmpl-right {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 420px;
    height: 100%;
    background: #fff;
    backdrop-filter: blur(10px);
    border-radius: 8px;
    opacity: 0.75;

    .right-content {
      position: relative;
      width: 415px;
      height: 100%;
    }

    .toggle-btn {
      position: absolute;
      top: 16px;
      left: -30px;
      z-index: 99;
    }

    .inspection {
      position: absolute;
      top: 16px;
      left: -150px;
      z-index: 99;
    }

    .active {
      transform: rotate(180deg);
    }

    .action {
      transition: transform 0.3s ease;
    }
  }

  .build-tmpl-left {
    position: absolute;
    bottom: 16px;
    left: 16px;
    width: 300px;
    height: auto;
  }

  /* 右侧展开时使用的动画 */
  .select-open {
    transform-origin: right center;
    animation: slide-right 0.6s ease-out forwards;
  }

  /* 右侧收起时使用的动画 */
  .select-close {
    transform-origin: right center;
    animation: slide-left 0.6s ease-in forwards;
  }
}
</style>
